<template>
  <page-wrap back title="顾问大厅" hideTab bg-color="#CCF2F8" :show-top="showTop">
    <view class="wrapper" :style="'padding-top:' + navHeight + 'px;'">

      <scroll-view class="latestList" :scroll-y="true" :scroll-x="false" :scroll-with-animation="true"
        v-if="consultantList.length">
        <view class="listitle">
          精准匹配职业顾问
        </view>
        <template v-for="consultantInfo,consultantIndex in consultantList">
          <view class="latestItem" v-if="consultantInfo.iname" :key="consultantInfo.consultantId">
            <view class="consultant-card">
              <view class="online-chat" @click="toChat(consultantInfo)">
                咨询 <img :src="rightArrow" />
              </view>
              <view class="header">
                <view class="avatar-box">
                  <image class="avatar" :src="consultantInfo.pic || consultantAvatar"></image>
                  <view class="status">{{
                  consultantInfo.isOnline == 1 ? "在线" : "离线"
                }}</view>
                </view>
                <view class="info-box">
                  <view class="name-box">
                    <text class="name">{{ consultantInfo.iname }}</text>
                    <image class="vip" :src="consultantVip"></image>
                  </view>
                  <view class="number-box">
                    <image class="star" :src="consultantStar"></image>
                    <text class="name">{{ consultantInfo.star || "5.0" }}</text>
                    <text class="line"></text>
                    <text class="text">服务过</text>
                    <text class="count">{{ consultantInfo.serviceCount.replace(/人/g, "") || "500" }}</text>
                    <text class="text">人</text>
                  </view>
                  <view class="tag-box">
                    <view class="tag" v-for="item in consultantInfo.consultantTag.split(',')" :key="item">{{ item }}
                    </view>
                  </view>
                </view>
              </view>
              <view class="comment-box">
                <view class="message-box">
                  <image class="message" :src="consultantChat"></image>
                  <text class="text">好评：</text>
                </view>
                <text
                  class="comment">{{ consultantInfo.positiveDesc || "挖掘精准，非常感谢顾问的耐心的服务，帮我找出了很多我以前没注意到的重要部分" }}</text>
              </view>
            </view>
          </view>
        </template>
      </scroll-view>
      <Empty text="暂无推荐顾问" :fontWeight="400" v-else></Empty>
    </view>

    <LoginDialog ref="loginDialog" @loginSuccessBack="loginSuccessBack"></LoginDialog>
  </page-wrap>
</template>

<script>
import Empty from "@/components/Empty.vue";
import { getConsultantList } from "@/api/modules/career";
import { getPersonDetail } from "@/api/index";
import IMEventHandler from "@/utils/im";
export default {
  name: "consultantHall",
  data() {
    return {
      showTop: false,
      personId: "",
      navHeight: 0,
      consultantList: [],
      emptyImg: this.$imgBaseSelf + "common/empty.png",
      onlineChat: this.$imgBase + "careerPath/onlineChat.png",
      consultantAvatar: this.$imgBase + "careerPath/consultantAvatar.png",
      consultantStar: this.$imgBase + "careerPath/consultantStar.svg",
      consultantVip: this.$imgBase + "careerPath/consultantVip.png",
      consultantChat: this.$imgBase + "careerPath/consultantChat.svg",
      rightArrow: this.$imgBaseSelf + "careerPath/arrowRight.svg?v=1",
    };
  },
  components: {
    Empty,
  },
  onLoad(options) {},
  created() {
    this.navHeight = getApp().globalData.navHeight;
    this.personId = uni.getStorageSync("person-id").slice(2) || undefined;
    this.reqGetConsultantList();
  },
  methods: {
    loginSuccessBack() {
      this.personId = uni.getStorageSync("person-id").slice(2) || undefined;
      if (this.personId) {
        this.getPersonDetail();
      }
    },
    getPersonDetail(update) {
      if (
        !getApp().globalData.userInfo ||
        !getApp().globalData.userInfo.id ||
        update
      ) {
        let param = {
          param: JSON.stringify({
            personId: this.personId,
          }),
          where: "",
          slaveInfo: 1,
        };
        getPersonDetail(param).then((res) => {
          this.userInfo = res.data || res;
          if (
            this.userInfo.pic &&
            this.userInfo.pic.indexOf("img.job1001.com/myUpload/pic.gif") >= 0
          ) {
            this.userInfo.pic = this.$defalutAvatar;
          }
          getApp().globalData.userInfo = this.userInfo;
        });
      } else {
        this.userInfo = getApp().globalData.userInfo;
      }
    },
    reqGetConsultantList() {
      const params = {
        personId: this.personId,
        pageNo: 1,
        pageSize: 50,
      };
      getConsultantList(params).then((res) => {
        if (res.code == 200) {
          this.consultantList = res.data;
        }
      });
    },
    toChat(consultantInfo) {
      uni.setStorageSync("consultantInfo", consultantInfo);
      if (!this.personId) {
        this.showLoginDialog();
        return;
      }
      // if (!this.info.personName) {
      //   uni.showToast({
      //     title: "请先激活！",
      //     icon: "none",
      //   });
      //   return;
      // }
      // 是否登录im
      var isIMLogin =
        getApp().globalData.tim && getApp().globalData.tim.getLoginUser();
      if (!isIMLogin) {
        uni.showLoading({
          title: "正在连接",
          mask: true,
        });
        setTimeout(() => {
          uni.hideLoading();
        }, 5000);
        let isFirst = true;
        try {
          new IMEventHandler(() => {
            if (isFirst) {
              isFirst = false;
              uni.hideLoading();
              uni.navigateTo({
                url: `/pagesSub/message/newChat/index?chatId=${consultantInfo.consultantId}_consultant&isZhituUser=1`,
              });
            }
          });
        } catch (error) {
          this.getPersonDetail();
          uni.hideLoading();
        }
      } else {
        uni.navigateTo({
          url: `/pagesSub/message/newChat/index?chatId=${consultantInfo.consultantId}_consultant&isZhituUser=1`,
        });
      }
    },
  },
  onPageScroll(res) {
    this.showTop = res.scrollTop > 0;
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  width: 100vw;
  min-height: 100vh;
  background-image: url($img-base + "careerPath/consultantHallBg.png?v=2");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-color: #fff5ea;
}
.latestList {
  padding: 0rpx 24rpx 24rpx;
  max-width: 100vw;
  overflow: hidden;
  box-sizing: border-box;
  .listitle {
    // height: 50rpx;
    font-size: 36rpx;
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    color: #222222;
    line-height: 50rpx;
    margin: 16rpx 0rpx 28rpx;
  }
  .consultant-card {
    // background: url($img-base + "careerPath/myConsultBg.png") no-repeat;
    background-size: 100% 100%;
    border-radius: 24rpx;
    padding: 24rpx;
    position: relative;
    background-color: white;
    margin-bottom: 16rpx;
    .online-chat {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      top: 20rpx;
      right: 20rpx;
      // width: 112rpx;
      // height: 52rpx;
      padding: 10rpx 24rpx;
      background: #ff711e;
      border-radius: 25rpx;
      color: white;
      font-size: 24rpx;
      img {
        width: 16rpx;
        height: 16rpx;
        margin-left: 8rpx;
      }
    }
    .header {
      display: flex;
      .avatar-box {
        position: relative;
        margin-right: 24rpx;
        .avatar {
          width: 120rpx;
          height: 142rpx;
          border-radius: 16rpx;
          object-fit: cover;
        }
        .status {
          width: 120rpx;
          height: 64rpx;
          position: absolute;
          background: linear-gradient(
            180deg,
            rgba(237, 248, 253, 0) 0%,
            #67b98e 100%
          );
          border-radius: 25rpx 25rpx 14rpx 14rpx;
          bottom: 3rpx;
          display: flex;
          align-items: flex-end;
          justify-content: center;
          font-size: 24rpx;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          color: #ffffff;
          padding-bottom: 4rpx;
        }
      }
      .info-box {
        .name-box {
          display: flex;
          align-items: center;
          .name {
            font-size: 32rpx;
            font-family: PingFang-SC, PingFang-SC;
            font-weight: 600;
            color: #424242;
            margin-right: 12rpx;
          }
          .vip {
            width: 32rpx;
            height: 32rpx;
            margin-left: 2rpx;
          }
        }
        .number-box {
          display: flex;
          align-items: center;
          font-size: 28rpx;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 600;
          color: #888888;
          margin-top: 13rpx;
          .name {
            color: #424242;
          }
          .star {
            width: 24rpx;
            height: 24rpx;
            margin-right: 12rpx;
            margin-top: -4rpx;
          }
          .line {
            width: 2rpx;
            height: 22rpx;
            background: #dfdfdf;
            margin: 0 20rpx;
          }
          .count {
            font-size: 28rpx;
            font-family: PingFang-SC, PingFang-SC;
            font-weight: 600;
            color: #424242;
            margin: 0 12rpx;
          }
          .text {
            font-size: 26rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #888888;
            line-height: 32rpx;
          }
        }
        .tag-box {
          display: flex;
          margin-top: 8rpx;
          .tag {
            line-height: 44rpx;
            height: 44rpx;
            text-align: center;
            background: #fef9e3;
            border-radius: 4rpx;
            // opacity: 0.73;
            padding: 0 14rpx;
            color: #a26d32;
            font-size: 24rpx;
            &:not(:last-child) {
              margin-right: 12rpx;
            }
          }
        }
      }
    }
    .comment-box {
      padding: 20rpx 22rpx;
      background: #f6f6f6;
      border-radius: 16rpx;
      // opacity: 0.73;
      margin-top: 26rpx;
      position: relative;
      .message-box {
        position: absolute;
        left: 20rpx;
        top: 21rpx;
        display: flex;
        .message {
          width: 32rpx;
          height: 32rpx;
          flex-shrink: 0;
          margin-right: 6rpx;
          margin-top: 4rpx;
        }
        .text {
          font-size: 28rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #888888;
          display: inline-block;
          flex-shrink: 0;
        }
      }
      .comment {
        font-size: 28rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #222;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; // 控制多行的行数
        -webkit-box-orient: vertical;
        text-indent: 4em;
      }
    }
  }
}
::v-deep .empty {
  margin: 0 auto;
  text {
    color: #999999 !important;
    font-size: 28rpx !important;
  }
}
</style>

